<template>
  <transition name="fade">
    <div id="PopupsBox" v-if="popupsShow" @click="popupsShow = false">
      <div class="PopupsBox" @click.stop>
        <book-item :book="book" popup></book-item>
      </div>
    </div>
  </transition>
</template>

<script>
import BookItem from "@/components/BookItem/BookItem.vue";
export default {
  components: {
    BookItem,
  },
  data() {
    return {
      popupsShow: false,
      book: null,
    };
  },
  methods: {
    show(book) {
      this.book = book;
      this.popupsShow = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ {
  opacity: 0;
}
#PopupsBox {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  .PopupsBox {
    width: 3.1rem;
    background: #fff;
    border-radius: 0.05rem;
    box-sizing: border-box;
    padding: 0.07rem;
    padding-bottom: 0;
    ::v-deep {
      .book-item {
        border: none;
      }
      .desc {
        margin-bottom: 0;
      }
    }
  }
}
</style>
